<template>
	<view>
		<view class="banner">
			<image src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221126/987a839f144d4f13b1ff0022b66caee7.jpg" mode="widthFix" class="b-cover"></image>
		</view>
		<view class="nav">
			<navigator v-for="item,index in navData" :key="index" :url="item.url" hover-class="none" class="n-list" :open-type="item.opentype?item.opentype:'navigate'">
				<view class="nl-icon">
					<image :src="item.src" mode="widthFix" class="image"></image>
				</view>
				<view class="nl-title">{{item.title}}</view>
			</navigator>
		</view>
		<view class="hr"></view>
		<view class="dowhat">
			<view class="d-title">
				<view class="dt-ch">我们还能为您做什么</view>
				<view class="dt-en">
					<text class="dte-text">WHAT ELSE CAN WE DO FOR YOU</text>
				</view>
			</view>
			<view class="d-list">
				<view class="dl-box" v-for="item,index in dowhatData" :key="index">
					<view class="dlb-icon">
						<image :src="item.src" :style="item.style"></image>
					</view>
					<text class="dlb-title">{{item.title}}</text>
				</view>
			</view>
		</view>
		<view class="hr"></view>
		<view class="case">
			<view class="c-city">
				<view class="cc-title">服务案例与搜索引擎优化</view>
				<view class="cc-list">
					<view class="ccl-row" v-for="item,index in caseCityData" :key="index">
						<navigator :url="item.url" class="cclr-a" hover-class="none">{{item.cityName}}</navigator>
					</view>
				</view>
			</view>
			<view class="c-type">
				<view class="ct-scroll">
					<navigator v-for="item,index in caseTypeData" :key="index" :url="item.url" class="cts-a" hover-class="none">{{item.typeName}}</navigator>
				</view>
			</view>
			<view class="c-product">
				<navigator v-for="item,index in caseListData" :key="index" :url="item.url" class="cp-a" hover-class="none">
					<image :src="item.images" mode="aspectFill" class="cpa-cover"></image>
					<view class="cpa-title">{{item.title}}</view>
				</navigator>
			</view>
		</view>
		<view class="hr"></view>
		<view class="news">
			<view class="n-list" v-for="item,index in newsData" :key="index">
				<navigator :url="item.url" class="nl-title" hover-class="none">
					<view class="nlt-text" :class="'icon'+item.num">{{item.typeName}}</view>
					<text class="nlt-more">更多>></text>
				</navigator>
				<view class="nl-content">
					<navigator :url="item.url" class="nlc-cover" hover-class="none">
						<image :src="item.imgUrl" mode="aspectFill" style="width: 100%;height: 100%;"></image>
					</navigator>
					<view class="nlc-list">
						<navigator v-for="ite,ind in item.newsList" :key="ind" :url="ite.url" class="nlcl-a" hover-class="none">
							<view class="nlcla-num">{{ite.num}}</view>
							<view class="nlcla-title">{{ite.title}}</view>
						</navigator>
					</view>
				</view>
			</view>
		</view>
		<view class="hr"></view>
		<view class="about-title">关于我们</view>
		<view class="about-introduce">走过多年历程的网站建设公司，致力于向客户提供高端网站建设服务、小程序开发、网站优化、竞价托管、抖音代运营超过1800家企事业单位和个人的选择，用诚信与服务见证成长。</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navData: [{
					src: 'https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221126/fbb7657115e342d9a1d94d2a80b79c99.png',
					url: '/pages/index',
					title: '首页',
					opentype: 'switchTab'
				}, {
					src: 'https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221126/dfd9ad30ae4547f6be32107392667f97.png',
					url: '/pages/wzjs',
					title: '网站建设',
					opentype: ''
				}, {
					src: 'https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221126/3f9d9be959714304bd2790cd42186a4c.png',
					url: '/pages/wzyh',
					title: '网站优化',
					opentype: ''
				}, {
					src: 'https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221126/cce2e260fccb4f1eb512684e4ea67b23.png',
					url: '/pages/jjtg',
					title: '竞价托管',
					opentype: ''
				}, {
					src: 'https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221126/432d2f5ec3904fa186e4396ab0718f10.png',
					url: '/pages/dyyy',
					title: '抖音运营',
					opentype: ''
				}, {
					src: 'https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221126/b3198493d59c43268037eb1c70160069.png',
					url: '/pages/khal',
					title: '客户案例',
					opentype: ''
				}, {
					src: 'https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221126/22addedcfc274cd59de5c4463b3ef726.png',
					url: '/pages/xwzx',
					title: '新闻资讯',
					opentype: ''
				}, {
					src: 'https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221126/c36e7527e2a54b9da941694142e6ffd2.png',
					url: '/pages/lxwm',
					title: '联系我们',
					opentype: ''
				}],
				dowhatData: [{
					src: 'https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221126/86bbea9cedfe4bbd8288c82271c2bdda.png',
					style: 'width: 101rpx;height: 79rpx;',
					title: '抖音\n代运营'
				}, {
					src: 'https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221126/0f7f795960db4f7289d3906393883279.png',
					style: 'width: 113rpx;height: 68rpx;',
					title: '巨量引擎\n广告投放'
				}, {
					src: 'https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221126/9142b90aef85451b8c6705ce4fd5659c.png',
					style: 'width: 108rpx;height: 68rpx;',
					title: '网站建设\n维护托管'
				}, {
					src: 'https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221126/5c2efc6a25d04ba3966fe4d1a6dfad60.png',
					style: 'width: 101rpx;height: 77rpx;',
					title: '新媒体\n运营'
				}, {
					src: 'https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221126/9a7064ca665e423890a3c9cc90b215aa.png',
					style: 'width: 84rpx;height: 71rpx;',
					title: '危机公关\n处理'
				}, {
					src: 'https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221126/a694475cffee421588dfebbaeaa8aa50.png',
					style: 'width: 75rpx;height: 76rpx;',
					title: '搜索引擎\n收录'
				}],
				caseCityData: [],
				caseTypeData: [],
				caseListData: [],
				newsData: []
			}
		},
		onLoad() {
			this.getqueryCaseCityListFn()
			this.getqueryCaseTypeListFn()
			this.getqueryCaseListFn()
			this.getqueryTypeAndNewsFn()
		},
		onShow() {
			// 设置TDK
			if (uni.getSystemInfoSync().uniPlatform == 'mp-baidu') {
				swan.setPageInfo({
					title: '网站建设与制作-网站开发制作公司-网站优化-微信小程序设计-纺扬网站建设',
					description: '上海、成都、重庆、北京、广州、深圳网站建设及seo关键词优化认准纺扬科技（☏:191-0267-1826），多年来致力于为客户创造商业价值，您值得信赖。',
					keywords: '网站建设,网站制作,网站开发,网站优化,微信小程序设计,纺扬网站建设'
				})
			}
		},
		methods: {
			// 获取案例城市
			async getqueryCaseCityListFn() {
				let getCity = await this.u.http({
					url: this.u.queryCaseCityList,
					data: {
						pageNum: 1,
						pageSize: 100
					}
				})
				if (getCity.code == 200) {
					this.caseCityData = getCity.data.list
					this.caseCityData.forEach(item => {
						item.url = `/pages/khal?city=${item.cityAliases}`
					})
				}
			},
			// 获取案例类型
			async getqueryCaseTypeListFn() {
				let getType = await this.u.http({
					url: this.u.queryCaseTypeList,
					data: {
						pageNum: 1,
						pageSize: 100
					}
				})
				if (getType.code == 200) {
					this.caseTypeData = getType.data.list
					this.caseTypeData.forEach(item => {
						item.url = `/pages/khal?type=${item.typeAliases}`
					})
				}
			},
			// 获取案例列表
			async getqueryCaseListFn() {
				let getCaseList = await this.u.http({
					url: this.u.queryCaseList,
					data: {
						pageNum: 1,
						pageSize: 8,
						cityCode: '',
						caseType: ''
					}
				})
				if (getCaseList.code == 200) {
					this.caseListData = getCaseList.data.list
					this.caseListData.forEach(item => {
						item.url = `/pages/khalxq?id=${item.id}`
					})
				}
			},
			// 获取新闻资讯
			async getqueryTypeAndNewsFn() {
				let getNews = await this.u.http({
					url: this.u.queryTypeAndNews,
					data: {
						pageSize: 4
					}
				})
				if (getNews.code == 200) {
					this.newsData = getNews.data
					this.newsData.forEach((item,index) => {
						item.num = index + 1
						item.url = `/pages/xwzx?type=${item.typeAliases}`
						item.newsList.forEach((ite,ind) => {
							ite.num = ind + 1
							ite.url = `/pages/xwzxxq?id=${ite.id}`
						})
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url("@/static/css/color.less");
	
	.nav {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		padding-bottom: 30rpx;
		
		.n-list {
			flex: 25% 0;
			
			.nl-icon {
				width: 100%;
				height: 129rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					box-shadow: 0 5rpx 18rpx rgba(0, 165, 255, .3);
				}
			}
		
			.nl-title {
				font-size: 24rpx;
				text-align: center;
				padding: 0 10rpx;
				overflow: hidden;
			}
		}
	}
	
	.dowhat {
		background-color: #fff;
		
		.d-title {
			padding-top: 59rpx;
			
			.dt-ch {
				font-size: 36rpx;
				text-align: center;
				color: @color-title-black;
			}
			
			.dt-en {
				margin-top: 14rpx;
				display: flex;
				justify-content: center;
				
				.dte-text {
					position: relative;
					font-size: 18rpx;
					
					&::before {
						content: '';
						position: absolute;
						top: 50%;
						right: calc(100% + 17rpx);
						transform: translateY(-50%);
						width: 98rpx;
						height: 1rpx;
						background: linear-gradient(to left, @color-blue, transparent);
					}
					
					&::after {
						content: '';
						position: absolute;
						top: 50%;
						left: calc(100% + 17rpx);
						transform: translateY(-50%);
						width: 98rpx;
						height: 1rpx;
						background: linear-gradient(to right, @color-blue, transparent);
					}
				}
			}
		}
	
		.d-list {
			margin-top: 33rpx;
			padding: 0 24rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			justify-content: space-between;
			
			.dl-box {
				width: 196rpx;
				height: 194rpx;
				border: 1rpx solid #f0f0f0;
				box-sizing: border-box;
				background-color: #fff;
				margin-bottom: 40rpx;
				overflow: hidden;
				
				.dlb-icon {
					width: 100%;
					height: 118rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
				.dlb-title {
					font-size: 24rpx;
					text-align: center;
					display: block;
				}
			}
		}
	}

	.case {
		margin-top: 40rpx;
		
		.c-city {
			background-color: #f2f2f2;
			padding-bottom: 20rpx;
		
			.cc-title {
				font-size: 36rpx;
				text-align: center;
				padding-top: 38rpx;
			}
			
			.cc-list {
				margin-top: 36rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: stretch;
			
				.ccl-row {
					flex: 20% 0;
					text-align: center;
					margin-bottom: 20rpx;
					overflow: hidden;
				
					.cclr-a {
						font-size: 30rpx;
						color: #666;
					}
				}
			}
		}
	
		.c-type {
			margin-top: 20rpx;
			height: 44rpx;
			overflow: hidden;
			
			.ct-scroll {
				display: flex;
				align-items: stretch;
				padding-right: 20rpx;
				height: 59rpx;
				overflow-x: auto;
				
				.cts-a {
					padding: 0 20rpx;
					height: 44rpx;
					line-height: 44rpx;
					background-color: #f2f2f2;
					margin-left: 20rpx;
					font-size: 24rpx;
					color: #666;
					white-space: nowrap;
				}
			}
		}
		
		.c-product {
			padding: 20rpx 20rpx 40rpx 20rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			justify-content: space-between;
		
			.cp-a {
				width: 340rpx;
				margin-top: 20rpx;
				box-sizing: border-box;
				overflow: hidden;
				box-shadow: 0 2rpx 10rpx rgba(117, 117, 117, .1);
				
				.cpa-cover {
					width: 100%;
					height: 240rpx;
					display: block;
				}
				
				.cpa-title {
					background-color: @color-blue;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					padding: 0 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 30rpx;
					color: #fff;
				}
			}
		}
	}

	.news {
		padding-top: 30rpx;
		overflow: hidden;
		
		.n-list {
			margin-bottom: 30rpx;
			padding: 0 20rpx;
			
			.nl-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.nlt-text {
					flex: 1;
					padding-left: 56rpx;
					font-size: 36rpx;
					color: #999;
					box-sizing: border-box;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					position: relative;
					
					&:before {
						content: '';
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						top: 50%;
						left: 0;
						z-index: 1;
						transform: translateY(-50%);
					}
					
					&.icon1:before {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221128/5f7f2a60518145a4a2df908998f5ae15.png) center / 40rpx no-repeat;
					}
					
					&.icon2:before {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221128/31893a8496c048ad94dce227222d4b0d.png) center / 40rpx no-repeat;
					}
					
					&.icon3:before {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221128/02248745e16d414bbc0501d7912f2aca.png) center / 40rpx no-repeat;
					}
					
					&.icon4:before {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221128/6797d0c164b14bbfbc2a9a15831b5375.png) center / 40rpx no-repeat;
					}
					
					&.icon5:before {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221128/4aac8b4096d14f4faf26b6ad636f4eb0.png) center / 40rpx no-repeat;
					}
					
					&.icon6:before {
						background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221128/ec6a3e5b7cdf403aa6c117805d011536.png) center / 40rpx no-repeat;
					}
				}
				
				.nlt-more {
					color: #d1d1d1;
					font-size: 24rpx;
					font-family: Arial;
				}
			}
		
			.nl-content {
				margin-top: 30rpx;
				display: flex;
				align-items: flex-start;
				
				.nlc-cover {
					width: 250rpx;
					height: 210rpx;
					margin-right: 22rpx;
				}
				
				.nlc-list {
					flex: 1 0;
					overflow: hidden;
					
					.nlcl-a {
						display: flex;
						align-items: center;
						padding-bottom: 9rpx;
						margin-bottom: 9rpx;
						border-bottom: 1rpx dashed #f1f1f1;
						box-sizing: border-box;
						
						.nlcla-num {
							width: 36rpx;
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							color: #fff;
							font-size: 24rpx;
							margin-right: 20rpx;
							background-color: #ccc;
							overflow: hidden;
						}
							
						&:nth-child(1) .nlcla-num, &:nth-child(2) .nlcla-num, &:nth-child(3) .nlcla-num {
							background-color: @color-orange;
						}
						
						&:last-child {
							border: 0;
							padding-bottom: 0;
							margin-bottom: 0;
						}
						
						.nlcla-title {
							flex: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
	
	.about-title {
		margin-top: 57rpx;
		text-align: center;
		font-size: 36rpx;
	}
	
	.about-introduce {
		padding: 40rpx 20rpx;
		font-size: 28rpx;
		color: #666;
		line-height: 48rpx;
	}
	
</style>
